<template>
	<view style="width:750upx;background-color: #f7f6fc;height: 100%;"  >
        
        <view v-for="(item,index) in plan">
            
            <view class="content" v-if="item.jude == 2" @click="enter(item.id)">
		    <view class="title">
               
               <view class="left">
                   
                <view class="titlename">
              <view class="label">
		            <image src="../../static/schedule/labelone.png" mode="aspectFit" style="height: 50upx;width: 50upx;"></image>
		        </view>
                <view class="name">
                    <text>{{item.subtitle}}</text>
                </view>  
                       
                   </view>
                   
                   <view class="progress-sign">
                       进度{{item.signednum}}/{{item.signnum}}
                   </view>
                   
               </view>
		        
                <view class="sign">
                    <image src="../../static/schedule/nofinish.png" mode="aspectFit" style="width: 130upx;height: 100upx;"></image>
                </view>
  
		    </view>

            <view class="progress">
                <view class="cu-progress round sm">
                	<view class="bg" :style="{width:item.progress}"></view>
                </view>
            </view>
            
            <view class="tail">
                <view class="watch" >围观{{item.circuessNum}}</view>
                <view class="support" >赞{{item.thumb}}</view>  
                <view class="integral">
                    <view  class="again" style="padding-left:20upx;"><button size="mini" style="background-color: #00a3e8;color: white;font-weight: 800;border-radius: 25upx;" @tap.stop="again(item.id)">再来一次</button></view>
                </view>
                
            </view>
		</view>
        
        <view class="content" v-if="item.jude == 1" @click="enter(item.id)">
            <view class="title">
               
               <view class="left">
                   
                <view class="titlename">
              <view class="label">
                    <image src="../../static/schedule/labeltwo.png" mode="aspectFit" style="height: 50upx;width: 50upx;"></image>
                </view>
                <view class="name">
                    <text{{item.subtitle}}</text>
                </view>  
                       
                   </view>
                   
                   <view class="progress-sign">
                       进度{{item.signednum}}/{{item.signnum}}
                   </view>
                   
               </view>
                
                <view class="sign">
                    <image src="../../static/schedule/finish.png" mode="aspectFit" style="width: 120upx;height: 80upx;margin-top: -30upx;"></image>
                </view>
          
            </view>
        
            <view class="progress">
                <view class="cu-progress round sm">
                	<view class="bg" :style="{width:item.progress}"></view>
                </view>
            </view>
            
            <view class="tail">
                <view class="watch" >围观{{item.circuessNum}}</view>
                <view class="support" >赞{{item.thumb}}</view>  
                <view class="integral">
                    <view  class="jifen">积分{{item.integral}}</view>
                </view>
                
            </view>
        </view>
        
        
        </view>
		
        
        

	</view>
</template>

<script>
	export default {
           props:{
          past:Number  
        },
        watch:{
            past:function(newQuestion, oldQuestion){
                
                 this.$emit('reachpast') 
                    
                if(this.sign == 0){
                    return
                }
                
                if(this.past == 0){
                    return
                }
                    
                if(newQuestion == 1){
                    this.getdata(this,this.PageNum)
                }
                
                
            }
        },
		data() {
			return {
                loading:true,
                color: '#0081ff',
                plan: [],
                planNum:0,
                PageNum:1,
                sign:1,
			}
		},
		methods: {
			
                getdata(c,PageNum = 1){
                   
                   
                this.$api.test({
                   url:"setgoals/getMygoals",
                   data:{
                       type:1,
                       PageNum:PageNum,
                       PageLimit:5
                   }
                }).then((res) =>{
                   
                  
                   if(res.data.plan.length == 0){
                       c.sign = 0;
                       uni.setStorageSync("goingnum",c.sign)
                       return; 
                   }
                   
                   for(let i of res.data.plan){
                       
                       let {signednum,signnum} = i
                       
                       signnum = parseFloat(signnum); 
                    signednum = parseFloat(signednum); 
                       
                       i.progress = Math.round(signednum / signnum * 10000) / 100.00 + "%";
                       
                   }
                        
                   c.planNum = res.data.planNum;
                   
                     c.plan =  c.plan.concat(res.data.plan);
                     
                     uni.setStorage({
                         key:"pastdata",
                         data:c.plan,
                         success(){
                             console.log("已存")
                         }
                     })
                    
                })   
                   
          
              
                    
                    this.PageNum++;
                    
                },
                again(id){
                    
                  this.$api.test({
                     url:'setgoals/doItAgain',
                     data:{
                         id
                     }
                  }).then((res) =>{
                     
                    console.log(res.data);
                                             
                                             if(res.data.statue == 0){
                                                 uni.showToast({
                       title: '操作成功',
                       duration: 2000
                    });
                    
                      uni.setStorageSync('again', 'ok');
                       uni.$emit('again',{msg:'again'})
                      
                      
                                                 
                                             }
                      
                  })  
   
                      
                },
                 enter(id){
                    
                     uni.setStorageSync("id",id)
                     
                    uni.navigateTo({
                        url:"../../pages/detail/detail"
                    })
                   
                    
                    
                }
                  
		},
        created() {
            this.getdata(this)
        }
	}
</script>

<style>
.title{
    display: flex;
    flex-direction: row;
}
.content{
    padding-left:30upx ;
    padding-right: 30upx;
    margin-left: 40upx;
    margin-right: 40upx;
    padding-top: 30upx;
    padding-bottom: 20upx;
    background-color: #FBFBFB ;
    margin-top: 20upx;
    /* border: 0.05upx solid #C0C0C0; */
}
.progress-sign{
    color: #999999;
    font-size: 30upx;
}
.left{
    width: 500upx;
    display: flex;
    flex-direction: column;
}
.title{
    display: flex;
    flex-direction: row;
}
.sign{
    width:130upx;
    height: 100upx;
}
.titlename{
    display: flex;
   flex-direction: row;
}
.progress{
    padding-bottom: 20upx;
    border-bottom: 1px solid #D8D8D8;  
}
.tail{
    display: flex;
    flex-direction: row;
    padding-top: 30upx;
    align-items: center;
}
.name{
    color: #333333;
    font-size: 35upx;
    font-weight: 800;
}
.label{
    width: 50upx;
    height: 50upx;
    margin-right: 30upx;
}
.watch{
    width:340upx;
    color: #333333;
}
.support{
     width:250upx;
    color: #333333;
}
.integral{
   width: 250upx;
   border-radius: 20upx;
}
.jifen{
    padding-left: 50upx;
    color: #333333;
}
.bg{
    background-color: #00a3e8;
}
</style>
